;
(function (call) {
    var zqjdjsModal = {
        mapId: "tjMap",
        selectedPro: [],
        playList: null,
        latestTime: null,
        isFirstGetTime: true,
        areaExent: {
            12: [114.94, 38.32, 119.80, 40.47], // 全市
            hhly: [108.71, 43.88, 123.66, 35.55] // 海河流域
        },
        perValue:"90,95",
        router: {
            queryData: "/modelMsisExtreme/statisticsExtremeByStation",
        },
        stationId:[
            54517,
            54526,
            54527,
            54622,
            54528,
            54523,
            54525,
            54623,
            54428,
            54529,
            54619],
        stationName:[
            "天津市区"
            ,"东丽区"
            ,"西青区"
            ,"津南区"
            ,"北辰区"
            ,"武清区"
            ,"宝城区"
            ,"滨海新区"
            ,"蓟州区"
            ,"宁河区"
            ,"静海区"
        ], 
        init: function () {
            var that = this;
			if(!$("#qhpjjsTime").val()){
				$("#qhpjjsTime").val(new Date().format("MM-dd"));
			}
            $("#qhpjjs-month").find("option[lid='"+new Date().format("M")+"']").prop("selected","selected");
			if($("#qhpjjsTypeSelect").find("option:selected").attr("lid") == "area"){
				$(".qhpjjs-time").show();
				$("#qhpjjs-station").hide();
				$("#qhpjjs-month").hide();
				that.loadData();
			}else{
				 $(".qhpjjs-time").hide();
				 $("#qhpjjs-station").show();
				 $("#qhpjjs-month").show();
				that.loadDataByTime();
			}
			that.bindEvt();
            
        },
        
        /**
         * 绑定事件操作
         */
        bindEvt: function () {
            var that = this;
            
            $(".qhpjjsTime").off('change').on('change', function (e) { // 日期点击
                that.loadData();
            })
			 $("#qhpjjsStationSelect,#qhpjjsMonthSelect").off('change').on('change', function (e) { // 站点切换
                that.loadDataByTime();
            })
			 $("#qhpjjsTypeSelect").off('change').on('change', function (e) { //类型切换
				if($("#qhpjjsTypeSelect").find("option:selected").attr("lid") == "area"){
					$(".qhpjjs-time").show();
					$("#qhpjjs-station").hide();
					$("#qhpjjs-month").hide();
					that.loadData();
				}else{
					$(".qhpjjs-time").hide();
					$("#qhpjjs-station").show();
					$("#qhpjjs-month").show();
					that.loadDataByTime();
				}
                
            })
			
        },
		loadDataByTime(){
			var that = this;
			
            $.ajax({
                url: "/modelMsisExtreme/statisticsExtremeByTime",
                async: false,
                dateType: 'json',
                data: { 
                    stationId:$("#qhpjjsStationSelect").find("option:selected").attr("lid"),
                    month:$("#qhpjjsMonthSelect").find("option:selected").attr("lid")
                }
            }).done(function (res) {
                if (res.result && res.data){
                    that.loadTable(res);
                    that.loadCharts(res);
                } 
                
            }).fail(function () {
               
            })
			
		},
        // 加载数据
        loadData(){
            var that = this;
            $.ajax({
                url: that.router.queryData,
                async: false,
                dateType: 'json',
                data: { 
                    dateTime: $("#qhpjjsTime").val(),
                    perValue:that.perValue
                }
            }).done(function (res) {
                if (res.result && res.data){
                    that.loadTable(res);
                    that.loadCharts(res);
                } 
                
            }).fail(function () {
               
            })
        },
        loadTable(res){
            var that = this;
			var type = $("#qhpjjsTypeSelect").find("option:selected").attr("lid");
            var pers = that.perValue.split(",");
            var html = '<table>';
			if(type == "area"){
				html += '<thead>';
				html += '<tr>';
				html += '<td>区域</td>';
				that.stationName.forEach(name =>{
					html += '<td>'+name+'</td>';
				})
				html += '</tr>';
				html += '</thead><tbody>';
				for(var i=0;i<pers.length;i++){
					html += '<tr>';
					html += '<td>'+pers[i]+'%</td>';
					that.stationId.forEach(staId =>{
						html += '<td>'+res.data[staId].list[i]+'</td>';
					})
					html += '</tr>'
				}
				html += '</tbody></table>';
			}else{
				var head = '<tr><td>时间</td>';
				var firstTr = '<tr><td>90%</td>';
				var secondTr = '<tr><td>95%</td>';
				for(var i in res.data){
					head+="<td>"+i.split("-")[1]+"日</td>";
					firstTr+="<td>"+res.data[i].list[0]+"</td>"
					secondTr+="<td>"+res.data[i].list[1]+"</td>"
				}
				head+="</td>";
				firstTr+="</td>";
				secondTr+="</td>";
				html+='<thead>'+head+"</thead><tbody>"+firstTr+secondTr+"</tbody></table>"
			}
			
            $(".zqjdjs-table").html(html);
        },
        loadCharts(res){
            var that = this;
            var pers = that.perValue.split(",");
			var type = $("#qhpjjsTypeSelect").find("option:selected").attr("lid");
			var seriesData = [];
            var categories = that.stationName;
            var colors=["#FEDCDA","#FEF4D6","#D6ECFA","#FEE8D4"]
			if(type == "area"){
				pers.forEach(function (s, i) {
					var data = [];
					that.stationId.forEach(staId =>{
						data.push(Number(res.data[staId].list[i]));
					})
					seriesData.push({
						name: s + "%",
						type: 'column',
						data: data,
						color:colors[i]
					})
				})
			}else{
				categories = [];
				var firstSeries = [];
				var secondSeries = [];
				for(var i in res.data){
					categories.push(i.split("-")[1]+'日');
					firstSeries.push(Number(res.data[i].list[0]))
					secondSeries.push(Number(res.data[i].list[1]))
				}
				seriesData.push({
						name: "90%",
						type: 'column',
						data: firstSeries,
						color:colors[0]
				})
				seriesData.push({
					name: "95%",
					type: 'column',
					data: secondSeries,
					color:colors[1]
				})
				
			}
            
           
            
			var trendChart = {
				title: {
                    text:type == "area" ? "天津各站点"+$("#qhpjjsTime").val().replace("-","月")+"日气候平均降水阈值":$('#qhpjjsStationSelect').find("option:selected").text()+$('#qhpjjsMonthSelect').find("option:selected").text()+"气候平均阈值",
                    style:{
                        fontSize:"14px"
                    }
                },
				chart: {
					type:"column"
				},
				exporting: {
					enabled: false
                },
                credits:{
                    enabled:false
                },
				tooltip: {
					shared: true,
                    useHTML: true,
                    
					
				},
				plotOptions: {
					series: {
						connectNulls: true,
						marker: {
							symbol: 'circle'
                        },
                        /*dataLabels:{
                            enabled:true,
                            formatter:function(){
                                return this.point.y+"mm"
                            }
                        }*/
					}
				},
				xAxis: {
					categories: categories,
					
				},
				yAxis: {
					title: {
                        text:"降水量：mm"
                    }
				},
				series: seriesData
			};
			
			Highcharts.chart('zqjdjsChart', trendChart);
        },
    }
    
    if (typeof call === 'function') {
        CafeJS.zqjdjsModal = zqjdjsModal;
        call(zqjdjsModal);
    }
    window.zqjdjsModal = zqjdjsModal;
})(function (zqjdjsModal) {
    CafeJS.models(['ajax'], function () {
        zqjdjsModal.init();
    });
});
